<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
<body>

  <script>
  HTMLImports.whenReady(function() {

    // set lazyRegister to true
    Polymer.Settings.lazyRegister = true;

    window.XLazy = Polymer({
      is: 'x-lazy',
      registered: sinon.spy()
    });

    window.XEager = Polymer({
      is: 'x-eager',
      registered: sinon.spy()
    });

  });
  </script>

  <dom-module id="x-lazy-api">
    <template>
      <style>
        :host {
          background: red;
        }
      </style>
      <div id="lazy">{{a}}</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-lazy-api',
        go: sinon.spy()
      });
    });
    </script>
  </dom-module>

  <dom-module id="x-lazy-binding">
    <template>
      <style>
        :host {
          background: red;
        }
      </style>
      <div id="lazy">{{a}}</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-lazy-binding',
        properties: {
          a: {
            value: 'a',
            observer: '_aChanged'
          }
        },

        _aChanged: sinon.spy()
      });
    });
    </script>
  </dom-module>

  <dom-module id="x-lazy-style">
    <template>
      <style>
        :host {
          background: red;
        }
      </style>
      Lazy
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-lazy-style'
      });
    });
    </script>
  </dom-module>

  <dom-module id="x-eager-style">
    <template>
      <style>
        :host {
          background: blue;
        }
      </style>
      Lazy
    </template>
    <script>
    HTMLImports.whenReady(function() {
      window.XEagerStyle = Polymer({
        is: 'x-eager-style'
      });
    });
    </script>
  </dom-module>

<script>

suite('lazy-register', function() {

  test('not registered until first instance', function() {
    assert.isFalse(window.XLazy.prototype.registered.called, 'registered called before instance created');
    document.createElement('x-lazy');
    document.createElement('x-lazy');
    assert.isTrue(window.XLazy.prototype.registered.calledOnce, 'registered not called after instance created');
  });

  test('registered when `ensureRegisterFinished()` is called', function() {
    window.XEager.prototype.ensureRegisterFinished();
    assert.isTrue(window.XEager.prototype.registered.called, 'registered not called before instance created');
    document.createElement('x-eager');
    assert.isTrue(window.XLazy.prototype.registered.calledOnce, 'registered called more than once');
  });

  test('bindings and oservers can register lazily', function() {
    var e = document.createElement('x-lazy-binding');
    assert.equal(e.$.lazy.textContent, 'a');
    assert.isTrue(e._aChanged.calledOnce);  
  });

  test('api can register lazily', function() {
    var e = document.createElement('x-lazy-api');
    assert.ok(e.go);
    e.go();
    assert.isTrue(e.go.calledOnce);  
  });

  test('styles shimmed at first instance', function() {
    assert.notOk(document.querySelector('style[scope=x-lazy-style]'), 'style shimmed before registration complete');
    document.createElement('x-lazy-style');
    assert.ok(document.querySelector('style[scope=x-lazy-style]'), 'style shimmed at first instance');
  });  

  test('styles shimmed when `ensureRegisterFinished()` is called', function() {
    window.XEagerStyle.prototype.ensureRegisterFinished();
    assert.ok(document.querySelector('style[scope=x-eager-style]'), 'style shimmed before registration complete');
    document.createElement('x-eager-style');
    assert.equal(document.querySelectorAll('style[scope=x-eager-style]').length, 1);
  });  

  test('Polymer.Settings.eagerRegister', function() {
    Polymer.Settings.lazyRegister = false;
    var XTest1 = Polymer({
      is: 'x-test1',
      registered: sinon.spy()
    });
    assert.isTrue(XTest1.prototype.registered.called, 'registered not called when eagerRegister is set');
    Polymer.Settings.lazyRegister = true;
    var XTest2 = Polymer({
      is: 'x-test2',
      registered: sinon.spy()
    });
    assert.isFalse(XTest2.prototype.registered.called, 'registered called when eagerRegister not set');
  });

});

</script>

</body>
</html>
